<script setup>
	import { computed, ref } from 'vue'
	import { storeToRefs } from 'pinia';
	import { useConsultStore } from '@/stores/module/consult.js'
	 const store = useConsultStore()
	// const { initalValue,illnessInfo } = storeToRefs(useConsultStore())
	//接收父组件传过来的数据
	const props = defineProps({
		type:String,
		illnessType:String,
		depId:String
	})
	// 收集病情描述数据
	const illnessInfo = ref({
	  illnessDesc: '', //病情描述
	  illnessTime: '', //患病时长
	  consultFlag:'' ,//是否就诊过
	  picture:[] //病情相关图片
	})
	
	// 患病时长
	const illnessTimes = [
	  { value: 1, text: '一周内' },
	  { value: 2, text: '一月内' },
	  { value: 3, text: '半年内' },
	  { value: 4, text: '半年以上' }
	]
	//选择患病时长
	const onTimeTag = (value) => {
		illnessInfo.value.illnessTime = value
	}
	
	// 是否就诊过
	  const consultFlags = [
	    { value: 1, text: '就诊过' },
	    { value: 0, text: '没有就诊过' },
	  ]
	  //选择是否就诊过
	  const onFlagTagClick = (value) => {
		  illnessInfo.value.consultFlag = value
	  }
	  
	  //是否允许点击下一步
	  const nextStepEnable = computed(()=>{
		  return (
			illnessInfo.value.consultFlag !== '' && 
			illnessInfo.value.illnessDesc !== '' &&
			illnessInfo.value.illnessTime !== ''
		  )
	  })
	  //提示用户是否恢复之前填写的病情内容
	  if(store.consult.illnessDesc){
		  uni.showModal({
		  	title:'温馨提示',
			content:'是否恢复上一次填写的内容?',
			confirmText:'确认',
			confirmColor:'#16C2A3',
			cancelColor:'#848484',
			success:({confirm})=>{
				if(confirm){
					illnessInfo.value.illnessDesc = store.consult.illnessDesc
					illnessInfo.value.illnessTime = store.consult.illnessTime
					illnessInfo.value.consultFlag = store.consult.consultFlag
					illnessInfo.value.pictures = store.consult.pictures
				}
			}
		  })
	  }
	  //点击下一步
	  const onNext = () => {
		  if(illnessInfo.value.illnessDesc === ''){
			  return uni.showToast({
			  	title:'请输入病情描述',
				icon:'error'
			  })
		  }
		  if(illnessInfo.value.illnessTime === ''){
		  			  return uni.showToast({
		  			  	title:'请输入患病时长',
						icon:'error'
		  			  })
		  }
		  if(illnessInfo.value.consultFlag === ''){
		  			  return uni.showToast({
		  			  	title:'请选择是否就诊过',
						icon:'error'
		  			  })
		  }
		  store.setConsult(illnessInfo.value)
		  store.setType(props.type)
		  store.setDepId(props.depId)
		  store.setIllnessType(props.illnessType)
		  //跳转页面
		  uni.navigateTo({
		  	url:'/subpkg_consult/patient/index'
		  })
	  }
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image
          src="/static/uploads/doctor-avatar-2.png"
          class="doctor-avatar"
        />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :styles="{ backgroundColor: '#f6f6f6' }"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
			v-model="illnessInfo.illnessDesc"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text 
		  class="tag" 
		  v-for="item in illnessTimes" 
		  :key="item.value"
		  :class="{ active: item.value === illnessInfo.illnessTime }"
		  @click="onTimeTag(item.value)"
		  >
		  {{item.text}}
		  </text>
        </view>
        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text class="tag" 
		  v-for="item in consultFlags" 
		  :key="item.value"
		  :class="{active:item.value === illnessInfo.consultFlag }"
		  @click="onFlagTagClick(item.value)"
		  >
		  {{item.text}}
		  </text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
		  v-model="illnessInfo.picture"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" :disabled="!nextStepEnable" @click="onNext">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>